<template>
    <div>
        <panle title='文件管理' content="上传文件列表"></panle>
        <div class="searchbar">
            <el-row class="pt20">
                <el-col :span="12">

                    <el-button size="mini" @click="init()" style="float: left; margin-right: 5px;">刷新</el-button>
                    <el-upload class="upload-demo" :action="actions" multiple :on-success="uploadSuccess" ref="upload"
                               :show-file-list="false" :headers="uploadHeader" :on-error="uploadError">
                        <PersButton icon="el-icon-edit" size="mini" perms="sys:files:upload" type="primary" label="上传图片">
                        </PersButton>
                    </el-upload>


                    <pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="sys:files:del"
                                 label="批量删除"></pers-button>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">

                        <el-form-item label="">
                            <el-input v-model="formInline.keyword" size="mini" placeholder="请输入文件名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" size="mini" @click="serach">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe
                  default-expand-all v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="fid" label="ID" width="55"></el-table-column>
            <el-table-column prop="http_urls" label="缩略图">
                <template slot-scope="scope">
                    <el-image style="width: 50px; height: 50px" :src="scope.row.http_urls"
                              :preview-src-list="[scope.row.http_urls]" v-if="scope.row.type == 0">
                    </el-image>
                    <el-tag type="danger" :label="scope.row.f_type" effect="plain" size="small"
                            v-if="scope.row.type == 2">{{ scope.row.f_type }}</el-tag>
                    <el-tag type="success" :label="scope.row.f_type" effect="plain" size="small"
                            v-if="scope.row.type == 1">{{ scope.row.f_type }}</el-tag>


                </template>

            </el-table-column>
            <el-table-column prop="name" label="文件名称"></el-table-column>

            <!-- <el-table-column prop="urls" label="访问地址"></el-table-column> -->


            <el-table-column prop="f_type" label="文件后缀"></el-table-column>
            <el-table-column prop="oss" label="存储位置"></el-table-column>
            <el-table-column prop="creat_by" label="上传者"></el-table-column>
            <el-table-column prop="creat_time" label="上传时间"></el-table-column>
            <el-table-column prop="fid" label="操作">
                <template slot-scope="scope">
                    <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del" label="删除"
                                @click="delRole(scope.row)"></PersButton>
                    <PersButton type="text" size="mini" label="复制链接" icon="fa  fa-pencil" perms="node:edit"
                                @click="copy(scope.row)"></PersButton>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
let _self;
let uploads = process.env.VUE_APP_API;
import Panle from '@/components/Panle.vue';
import PersButton from '@/components/PersButton.vue';
import { listFiles, delFiles, batchRemove } from '@/api/files/files';
import { hasPermission } from '@/common/permission'

import {
    getToken
} from '@/common/token'
export default {
    components: {
        Panle,
        PersButton
    },
    data() {
        return {
            loading: false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            tableData: [],
            serachword: '',
            formInline: {},




            checkKey: [],
            multipleSelection: [],

            actions: uploads + "/api/apiadmin/uploads/index",
            uploadHeader: {
                "Authorization": "Bearer " + getToken()
            },
            uploadData: {
                fileType: 0  // 0 图片，1 文件, 2 视频，3 其他
            },
        }
    },
    created() {
        _self = this;
        _self.init();
    },
    methods: {
        hasPermission,
        init: function () {
            _self.loading = true;
            let param = {
                "pageSize": _self.pageSize,
                "pageNumber": _self.pageNumber,
                "keyWord": _self.serachword,
                'type': 3000
            }
            listFiles(param).then((res) => {
                if (res.code == 200) {
                    _self.tableData = res.data.list;
                    _self.total = res.data.total;
                    _self.loading = false;
                }
            })



        },
        serach: function () {
            _self.serachword = _self.formInline.keyword;
            _self.init();
        },
        handleSizeChange: function (e) {
            _self.pageSize = e;
            _self.init();
        },
        handleCurrentChange: function (e) {
            _self.pageNumber = e;
            _self.init();
        },
        handleSelectionChange: function (e) {
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.fid)

            }
            _self.multipleSelection = selectChang;
        },





        delRole: function (data) {
            _self.$confirm('确定删除【' + data.name + '】此文件', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                delFiles(data.fid).then((res) => {
                    if (res.code == 200) {
                        _self.msgSuccess(res.msg);
                        _self.init();
                    } else {
                        _self.msgError(res.msg);
                    }
                })


            }).catch(() => {
                _self.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },


        uploadSuccess: function (res) {
            if (res.code == 200) {
                _self.init();
                _self.msgSuccess(res.msg);
            } else {
                _self.msgError(res.msg);
            }
        },
        uploadError: function (res) {
            _self.msgError("后端错误，请联系管理员");
        },
        copy: function (data) {
            var oInput = document.createElement('input'); //创建一个隐藏input（重要！）
            oInput.value = data.http_urls; //赋值
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display = 'none';
            _self.msgSuccess("复制成功")
        },
        delAll: function () {
            if (_self.multipleSelection.length == 0) {
                _self.$alert('请选择要删除的数据', '系统提示', {
                    confirmButtonText: '确定',
                    type: 'error',
                });
                return false;
            }
            _self.$confirm('此操作将永久删除此数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = {
                    ids: _self.multipleSelection
                }
                batchRemove(data).then((res) => {
                    if (res.code == 200) {
                        _self.msgSuccess(res.msg);
                        _self.init();
                    } else {
                        _self.msgError(res.msg);
                    }
                })





            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                _self.$refs.multipleTable.clearSelection();
            });
        }
    }
}
</script>

<style lang="scss">
@import "@/assets/css/common";

.upload-demo {
    float: left;
    margin-right: 5px;
}

.demo-form-inline {
    .el-form-item {
        margin-bottom: 0;
    }
}

.el-tree {
    max-height: 200px;
    overflow: auto;
    background: #f7f7f7;
}

.el-tree-node__label,
.el-textarea__inner {
    font-size: 12px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
    float: left;
    width: 100px;
}

.el-checkbox__label {
    font-size: 12px !important;
}
</style>
